<template>
  <div ref="loginContainer" class="login-container">
    <div class="login-wrap">
      <div class="login-div">
        <div class="login-header">
          <div class="login-title">
            登&nbsp;&nbsp;录
            <!-- <div class="login-link" @click="toRegister">
              还没有账号，点击注册
            </div> -->
          </div>
        </div>
        <div class="login-form">
          <el-form
            ref="loginForm"
            hide-required-asterisk
            :model="loginForm"
            :rules="loginRules"
            label-position="top"
            status-icon
          >
            <el-form-item prop="account" label="手机号">
              <el-input
                v-model="loginForm.account"
                type="text"
                auto-complete="off"
                prefix-icon="el-icon-mobile-phone"
                placeholder="输入手机号"
                @keyup.enter.native="login"
              />
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                show-password
                placeholder="输入密码"
                @keyup.enter.native="login"
              />
            </el-form-item>
            <!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> -->
            <el-form-item>
              <el-button
                type="danger"
                class="logReg-button"
                :loading="loading"
                icon="el-icon-right"
                @click.native.prevent="login"
                @keyup.enter.native="login"
              />
            </el-form-item>
            <!-- <el-button type="text">忘记密码</el-button> -->
          </el-form>
        </div>
      </div>
      <div class="login-img" />
    </div>
    <Verify
      ref="verify"
      mode="pop"
      captcha-type="blockPuzzle"
      :img-size="{ width: '330px', height: '155px' }"
      @success="success"
    />
  </div>
</template>

<script>
import Verify from '@/components/verifition/Verify'
import { mapState } from 'vuex'
import uuid from 'uuid-v4'
export default {
  name: 'Login',
  components: { Verify },
  data() {
    return {
      loading: false,
      loginForm: {
        account: '',
        password: '',
        captcha: '',
        uuid: '',
        src: ''
      },
      loginRules: {
        account: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      checked: true
    }
  },
  computed: {
    ...mapState({
      registerInfo: (state) => state.app.registerInfo
    })
  },
  mounted() {
    if (this.registerInfo !== null) {
      this.loginForm.account = this.registerInfo.mobile
      this.loginForm.password = this.registerInfo.password
      this.$store.commit('SET_REGISTER_INFO', null)
    }
    this.loginForm.uuid = uuid()
    this.loginByKey()
  },
  methods: {
    loginByKey() {
      if (
        sessionStorage.getItem('tempParams') !== undefined &&
        sessionStorage.getItem('tempParams') !== null
      ) {
        const tempParams = JSON.parse(sessionStorage.getItem('tempParams'))
        this.$api.login
          .loginByKey({ tempKey: tempParams.tempKey })
          .then((res) => {
            if (res.code === 200) {
              sessionStorage.setItem('token', res.data.token)
              this.setUserInfo(res.data.details)
            }
            sessionStorage.removeItem('tempParams')
          })
      }
    },
    success(params) {
      this.loading = true
      const userInfo = {
        account: this.loginForm.account,
        password: this.loginForm.password,
        captcha: params.captchaVerification,
        mark: 'web',
        uuid: this.loginForm.uuid
      }
      this.$api.login
        .login(userInfo)
        .then((res) => {
          if (res.code === 200) {
            sessionStorage.setItem('token', res.data.token) // 放置token到本地会话
            this.setUserInfo(res.data.details)
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
          this.loading = false
        })
        .catch((res) => {
          this.$message({
            message: res.message,
            type: 'error'
          })
        })
    },
    useVerify() {
      this.$refs.verify.show()
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.useVerify()
        }
      })
    },
    setUserInfo(row) {
      const userInfo = {
        userId: row.id,
        name: row.name,
        companyName: row.companyName,
        nickName: row.nickName,
        email: row.email,
        mobile: row.mobile,
        createTime: row.createTime,
        isAdmin: row.isAdmin,
        orgId: row.orgId
      }
      sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
      this.$router.push('/') // 登录成功，跳转到主页
      this.toWeb(userInfo)
    },
    toWeb(userInfo) {
      window.open(this.global.yunUrl + '/?mobile=' + userInfo.mobile)
    },
    toRegister() {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  background: url("../assets/image/login/bg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  // background: #f3f5f9;
  .login-wrap {
    background: #fff;
    border-radius: 30px;
    width: 800px;
    height: 540px;
    padding: 0 50px;
    padding-top: 40px;
    margin: auto;
    margin-top: 130px;
    background: url("../assets/image/login/login-bg.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 0 5px 5px rgba(232, 233, 237, 0.5);
    display: flex;
    justify-content: space-between;
    .login-div {
      width: 45%;
      height: 100%;
      .login-header {
        .login-title {
          height: 40px;
          font-size: 40px;
          line-height: 1;
          font-weight: 600;
          color: #271665;
          position: relative;
          .login-link {
            position: absolute;
            left: 110px;
            bottom: 0;
            display: inline-block;
            font-size: 12px;
            color: #f56c6c;
            cursor: pointer;
          }
        }
      }
      ::v-deep .login-form {
        margin-top: 30px;
        .el-form-item {
          margin-bottom: 50px;
          .el-form-item__label {
            margin-left: 15px;
            padding: 0;
          }
          .el-input__suffix {
            .el-icon-circle-check {
              color: #67c23a;
            }
          }
          .el-input__inner {
            border-radius: 20px;
            background-color: #fafbff;
          }
          .el-form-item__error {
            margin-left: 15px;
          }
          .logReg-button {
            height: 50px;
            width: 50px;
            padding: 0;
            border-radius: 20px;
            margin-left: 15px;
            .el-icon-right {
              font-size: 20px;
              font-weight: 600;
            }
          }
        }
      }
    }
    .login-img {
      flex: 1;
    }
  }
}
</style>
